<!DOCTYPE html>
<html>
    <head>
        <title>Revel Test Runner</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <link href="{{url `Root`}}/@tests/public/css/bootstrap.min.css" type="text/css" rel="stylesheet"></link>
        <link href="{{url `Root`}}/@tests/public/css/github.css" type="text/css" rel="stylesheet"></link>
        <script src="{{url `Root`}}/@tests/public/js/jquery-1.9.1.min.js" type="text/javascript"></script>
        <script src="{{url `Root`}}/@tests/public/js/bootstrap.min.js" type="text/javascript"></script>
        <script src="{{url `Root`}}/@tests/public/js/highlight.pack.js" type="text/javascript"></script>
        <style>
        header { background-color:#ADD8E6 }
        header h1 {margin-top: 10px; margin-bottom:20px;}
        header table {margin-bottom: 0px }
        td .btn {margin-bottom: 1px; }
        button.file-test { margin-bottom: 0px; margin-left: 2px }
        table.tests tr { border-bottom: 1px solid #ddd; background-color: #f9f9f9; }
        .passed td { background-color: #90EE90 !important; }
        .failed td { background-color: #FFB6C1 !important; }
        td.result div.panel-default{ display:none; }
        td.result > a { color: red; }
        td.rightCol, td.leftCol { width: 40px; }
        pre { font-size:10px; white-space: pre; }
        .panel-heading {
            padding: 10px 5px 8px 5px
        }
        .name { width: 35%; }
        .w100 { width: 100%; }
        .logo, .logo:hover { text-decoration: none; color: inherit;}
        .pnt-triangle { color: #777; font-size: 18px;}
        .panel-group .panel-heading+.panel-collapse>.panel-body { border-top: none;}
        </style>
    </head>
    <body>
        <header>
            <div class="container">
                <h1 class="pull-left">
                    <a href="/@tests" class="logo">Test Runner</a> <small>- Run your application's tests here.</small>
                </h1>
                <div style="margin-top:16px" class="pull-right">
                    <button class="btn btn-success {{if not .suiteFound}}disabled{{end}}" all-tests="">Run All Tests</button>
                    <div><a class="small" href="#" id="allTestResults"></a></div>
                </div>
            </div>
        </header>
        <div class="panel-group container">
            {{if not .suiteFound}}
            <div style="margin-top:20px;padding:15px;" class="panel panel-default">
              <span style="font-weight:bold;color:#777;">Suite "{{.suiteName}}" is not found.</span>
            </div>
            {{end}}

            {{range .testSuites}}
            {{ $testFile := .Name }}
            <div style="margin-top:20px;" class="panel panel-default">
                <div class="panel-heading collapseLnk" style="cursor:pointer" data-toggle="collapse" data-target="#{{.Name}}">
                    <button id="suite{{.Name}}" class="btn btn-xs btn-success" test-file="{{.Name}}">Run</button>
                    <span class="h5">&nbsp;<a href="/@tests/{{ .Name }}">{{.Name}}</a></span>
                    <span id="pointTriangle{{.Name}}" class="pnt-triangle pull-right" data-tri-open="open">&#9660</span>
                </div>
                <div id="{{.Name}}" class="panel-collapse collapse in">
                    <table class="panel-body table table-condensed tests" suite="{{.Name}}">
                        {{range .Tests}}
                            <tr id="testRow{{.Name}}">
                                <td class="leftCol"><button data-test-file="{{$testFile}}" test="{{.Name}}" class="leftbutton btn btn-success btn-xs">Run</button></td>
                                <td class="name">{{ .Name }}</td>
                                <td class="result"><a href="#"></a></td>
                                <td class="rightCol"><button data-test-file="{{$testFile}}" test="{{.Name}}" class="pull-right btn btn-success btn-xs">Run</button></td>
                            </tr>
                        {{end}}
                    </table>
                </div>
            </div>
            {{end}}
        </div>

    <script>
    var passCount = 0;
    var failCount = 0;
    var buttons = [];
    var running;

    $(function() {
        var divId, visible;
        var oneOpened = false;
        var panels = $("div.panel-collapse");
        //close any panels that were previously closed.
        panels.each(function() {
            divId = "#" + $(this).attr("id");
            visible = parseBoolean(localStorage.getItem("testrunner_" + divId));
            if (visible) {
              togglePntTriangle(divId, visible);
              oneOpened = visible;
            } else {
                $(divId).css("height", "0").removeClass("in"); //this is the way bootstrap does it.
                $("div[data-target=" + divId + "]").addClass("collapsed");
                togglePntTriangle(divId, visible);
            }
        });

        if (!oneOpened && panels.length > 0) {
          divId = "#" + panels[0].id;
          $(divId).collapse('show');
          togglePntTriangle(divId, true);
        }
    });

    $(".fileTestLnk").click(function() {
        var tableId = $(this).attr("href");
        $(tableId).toggle();
        return false;
    });

    $("#allTestResults").click(function() {
        var badRows = $("tr.failed");
        if (badRows.length >= 0) {
            badRows[0].scrollIntoView();
        }

        return false;
    });

    $("button[test]").click(function() {
        $("#allTestResults").text("");
        var button = $(this).addClass("disabled").text("Running");
        $(this).closest("tr").removeClass("passed").removeClass("failed");
        addToQueue(button);
    });

    $("td.result a").click(function() { //show/hide the extended error div
        $(this).siblings().toggle();
        return false;
    });

    $("button[test-file]").click(function() {
        $("#allTestResults").text("");
        var testfile = $(this).attr('test-file');
        $("button").each(function() {
            if ($(this).data("test-file") == testfile)
                $(this).click();
        });
        return false;
    });

    $("button[all-tests]").click(function() {
        $("tr").removeClass("passed").removeClass("failed");
        passCount = 0;
        failCount = 0;
        var button = $(this).addClass("disabled").text("Running");
        $("button.leftbutton[test]").click();
    });

    $("div.collapseLnk").click(function() {
        var tableId = $(this).data("target");
        var visible = !$(tableId).is(":visible");
        localStorage.setItem("testrunner_" + tableId, visible);
        togglePntTriangle(tableId, visible);
    });

    function togglePntTriangle(suiteId, visible) {
      if (suiteId.charAt(0) == '#') {
        suiteId = suiteId.substring(1);
      }
      $('#pointTriangle' + suiteId).html(visible ? '&#9660' : '&#9654');
    }

    function parseBoolean(str) {
        return /^true$/i.test(str);
    }

    function addToQueue(button) {
        buttons.push(button);
        if (!running) {
            running = true;
            nextTest();
        }
    }

    function nextTest() {
        if (buttons.length == 0) {
            running = false;
        } else {
            var next = buttons.shift();
            runTest(next);
        }
    }

    function runTest(button) {
        var suite = button.parents("table").attr("suite");
        var test = button.attr("test");
        var row = button.parents("tr");
        var resultCell = row.children(".result");
        $("a", resultCell).text("");
        $("div.panel-default", resultCell).remove();
        $.ajax({
            dataType: "json",
            url: "{{url `Root`}}/@tests/"+suite+"/"+test,
            success: function(result) {
                row.attr("class", result.Passed ? "passed" : "failed");
                if (result.Passed) {
                    passCount++;
                } else {
                    console.log("fail:", result.Name);
                    failCount++;
                    var resultLnk = $("a", resultCell);
                    $(resultLnk).text(result.ErrorSummary);
                    resultCell.append(result.ErrorHTML);

                    var pnlDiv = row.closest("div");
                    if ($(pnlDiv).hasClass("in") == false) {
                        $("#link-" + suite).click();
                    }

                    $("#result_" + suite + "_" + test + " pre code").each(function(i, block) {
                        hljs.highlightBlock(block);
                    });
                }
                button.removeClass("disabled").text("Run");
                var runAllBut = $("button[all-tests]");
                if (buttons.length == 0 && runAllBut.hasClass("disabled")) {
                    runAllBut.removeClass("disabled").text("Run All Tests");
                    var resMsg = passCount + " passed, " + failCount + " failed.";
                    $("#allTestResults").text(resMsg);
                }
                nextTest();
            }
        });
    }
    </script>

    </body>
</html>
